<template>
  <main class="container">
    <template v-if="walletAddress">
      <van-divider>MetaMask信息面板</van-divider>
      <van-cell-group>
        <van-cell title="账户">
          <template #label>
            <div class="item">
              <div class="label">钱包地址</div>
              <div class="value">{{ walletAddress }}</div>
            </div>
          </template>
        </van-cell>
        <van-cell title="节点">
          <template #label>
            <div class="item">
              <div class="label">chainId</div>
              <div class="value">{{ binanceNodeInfo?.chainId }}</div>
            </div>
          </template>
        </van-cell>
      </van-cell-group>
    </template>
    <van-divider>操作面板</van-divider>
    <van-cell-group>
      <van-cell
        title="钱包地址"
        :value="hideStringMiddle(walletAddress, 4, 4, 4)"
        is-link
        @click="connectWallet"
      />
      <van-cell
        title="BNB余额"
        :value="balance"
        is-link
        @click="handleGetBalance"
      />
      <van-cell
        title="USDT代币余额"
        :value="tokenBalance"
        is-link
        @click="handleGetTokenBalance"
      />
      <van-cell title="BNB转账" is-link @click="handleSendTransaction" />
      <van-cell
        title="USDT代币转账"
        is-link
        @click="handleSendTokenTransaction"
      />
    </van-cell-group>
  </main>
</template>

<script setup>
import { ref, onUnmounted, onMounted } from "vue";
import { storeToRefs } from "pinia";
import {
  getWalletAddress,
  getBalance,
  getTokenBalance,
  sendTransaction,
  sendTokenTransaction,
} from "@/utils/Binance";
import { useBinanceStore } from "@/store";
const { setWalletAddress, setBinanceNodeInfo } = useBinanceStore();
const { walletAddress, binanceNodeInfo } = storeToRefs(useBinanceStore());
import { hideStringMiddle } from "@/utils";
const connectWallet = async () => {
  try {
    const address = await getWalletAddress();
    setWalletAddress(address);
  } catch (err) {
    console.log(err);
  }
};

const balance = ref("");
const handleGetBalance = async () => {
  try {
    const balanceVal = await getBalance(walletAddress.value);
    balance.value = balanceVal.toFixed(3);
  } catch (err) {
    console.log(err);
  }
};

const tokenBalance = ref("");
const handleGetTokenBalance = async () => {
  try {
    const balanceVal = await getTokenBalance({
      walletAddress: walletAddress.value,
    });
    tokenBalance.value = balanceVal;
  } catch (err) {
    console.log(err);
  }
};

const handleSendTransaction = async () => {
  try {
    const result = await sendTransaction({
      walletAddress: walletAddress.value,
      amount: 0.001,
    });
    console.log(result);
  } catch (err) {
    console.log(err);
  }
};

const handleSendTokenTransaction = async () => {
  try {
    const result = await sendTokenTransaction({
      walletAddress: walletAddress.value,
      amount: 1,
    });
    console.log(result);
  } catch (err) {
    console.log(err);
  }
};

const addWalletListener = () => {
  if (window.ethereum) {
    // 监听账户变化
    window.ethereum.on("accountsChanged", (accounts) => {
      console.log("当前账户: ", accounts[0]);
      setWalletAddress(accounts[0]);
    });
    // 监听网络变化
    window.ethereum.on("chainChanged", (chainId) => {
      console.log("当前网络: ", chainId);
      setBinanceNodeInfo({
        chainId: parseInt(chainId),
      });
    });
  }
};

onMounted(() => {
  addWalletListener();
});
</script>
<style lang="scss" scoped>
:deep(.van-cell__title) {
  width: 100%;
}
.item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 12px;
  .label {
    color: #999;
  }
  .value {
    color: #333;
  }
}
</style>
